<template>
  <uni-nav-bar title="客户" color="#333" :border="false" statusBar :fixed="true"></uni-nav-bar>
  <CustorTop ref="percentage"></CustorTop>
  <!-- 时间段筛选 -->
  <view class="package_sale" style="padding:10rpx 30rpx">
    <view class="datas space-between">
      <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
        @change="change" />
      <uni-icons type="bars" size="30" color="#666" @click="popupPop"></uni-icons>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <Customer :orderLists="orderLists" v-if="orderLists.length>0"></Customer>
    <Popu v-else :pageHeight="pageHeight" text="暂无客户信息"></Popu>
  </scroll-view>
  <CustomerPop ref="CustomerPops" @submit="submit"></CustomerPop>
  <SaleButtom active="1"></SaleButtom>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Popu from '@c/earthPushing/common/popu.vue';
  import SaleButtom from '@c/pobulic/saleButtom.vue';
  import CustorTop from '@c/earthPushing/customer/custorTop.vue';
  import Customer from '@c/earthPushing/customer/customer.vue';
  import CustomerPop from '@c/earthPushing/bullet-box/customer.vue';
  import { format, subDays } from 'date-fns';
  import { getUserList } from '@/gql/earthPushing/custom';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import { showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);

  const percentage = ref(null)
  const CustomerPops = ref(null)

  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);

  const label = ref('')
  const line = ref('')
  const cart_code = ref('')
  const nickname = ref('')
  const mobile = ref('')

  const pageHeight = ref();
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 330;
    },
  });
  onPullDownRefresh(() => {
    orderLists.value = []
    currentPage.value = 1
    init()
    percentage.value.init()
    CustomerPops.value.init()
    uni.stopPullDownRefresh();
  })
  init()
  function init() {
    showLoading()
    isLoading.value = true;
    const payload = {
      query: getUserList,
      variables: {
        page: currentPage.value,
        staff_id,
        start,
        end,
        cart_code: cart_code.value,
        nickname: nickname.value,
        mobile: mobile.value,
        label: label.value,
        line: line.value
      },
    };
    toPublish(
      'ql/staff/getUserList',
      payload,
      (obj : any) => {
        const { getUserList } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getUserList.list];
        lastPage.value = getUserList.lastpage;
      },
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  /**
   * 时间筛选数据信息
   */
  function change([sta, en]) {
    currentPage.value = 1;
    orderLists.value = [];
    start = sta;
    end = en;
    init();
  }
  /**
   * 筛选数据信息
   */
  function submit(lab : string, lin : string, search : string, type : string) {
    label.value = lab ? lab : ''
    line.value = lin ? lin : ''
    cart_code.value = type === 'cart_code' && search ? search : ''
    nickname.value = type === 'mobile' && search ? search : ''
    mobile.value = type === 'realname' && search ? search : ''
    currentPage.value = 1;
    orderLists.value = [];
    init();
  }
  //开关筛选类型弹框
  function popupPop() {
    CustomerPops.value.open()
  }
</script>

<style scoped lang="less">
  .popup {
    width: 600rpx;
    height: 100vh;
    background-color: #fff;
    bottom: 0px;
    padding: 20rpx;
    box-sizing: border-box;

    .search {
      width: 100%;
      background-color: #eee;
      border-radius: 5px;
      padding: 0px 10rpx;
      box-sizing: border-box;

      input {
        text-align: center;
      }
    }

    .list {
      view {
        width: 133rpx;
        height: 43rpx;
        border: 1px solid #999999;
        border-radius: 5px;
        justify-content: center;
        text-align: center;
        line-height: 43rpx;
        margin: 15rpx 15rpx 15rpx 0px;
      }

      .active {
        border: 1px solid #FFA542;
        color: #FFA542;
      }
    }

    .lis {
      view {
        width: 184rpx;
        height: 66rpx;
        text-align: center;
        line-height: 66rpx;
      }

      view:nth-of-type(1) {
        border: 1px solid #558AF1;
        color: #558AF1;
        box-sizing: border-box;
      }

      view:nth-of-type(2) {
        background: #558AF1;
        color: #fff;
      }
    }

  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>